@import "../../../../assets/scss/mixins/utility";
@import "../../../../assets/scss/mixins/palette";
@import "../../../../assets/scss/global";

.status-item, .hover-item {
  font-size: 12px;
}

.hover-item {
  display: none;
  cursor: pointer;
}

.active {
  background-color: $active-card;
  color: $text-color;
}

.offline {
  color: $silver-25 !important;
}

a {
  color: $text-color;
}

::ng-deep {
  td.selected,
  tr:hover td:not(.selected) {
    background: $selected-card;
    color: $white-text-color;

    * {
      color: $white-text-color;
    }

    img {
      filter: brightness(0) invert(1);
    }
  }
}

td:nth-child(1) {
  font-size: 15px;
  color: $text-color;

  img {
    width: 30px;
  }
}

::ng-deep {
  .compact th {
    z-index: 1;
  }

  .compact th,
  .compact td:nth-child(1),
  .compact td:nth-child(2),
  .compact td:nth-child(4) {
    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .compact i.moon-More {
    padding-left: 18px !important;
  }
}

.select-region-form,
.named-profile-form,
.ssm-tray-form {
  margin-top: 20px;

  a {
    display: inline-block;
    margin-left: 10px;
  }
}

span.badge-region {
  border-radius: $region-tag-border-radius;
  padding-top: 6px;
  padding-right: 7px;
  padding-left: 7px;
  font-weight: 500;
  background-color: $region-tag-color !important;
  color: $white-text-color !important;
}

span.badge-region.badge-black {
  background-color: $region-tag-active-color !important;
}

i.active {
  background-color: unset !important;
}

i.fas.active {
  color: $success-session !important;
}

i.fa-circle.status-item {
  font-size: 13px;
  padding-left: 45%;
}

i.fa-spin.status-item {
  font-size: 13px;
  margin-left: 45%;
}

i.moon-More {
  font-size: 20px;
  padding-left: 41%;
  padding-top: 6px;
  width: 10px;
}

td.active {
  font-weight: normal !important;
}

td:nth-child(1) {
  padding-left: 20px !important;
  padding-right: 10px !important;

  .strong {
    -webkit-text-stroke-width: 0.5px;
    letter-spacing: -0.022em;
  }
}

td:nth-child(2),
td:nth-child(4) {
  font-size: 13px;
  font-weight: normal;

  .strong {
    font-weight: normal !important;
  }
}

td:nth-child(2),
td:nth-child(4) {
  span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 90%;
  }
}

::ng-deep {
  .table td {
    padding: 0 !important;
  }

  .compact {
    td {
      padding: 0 0 0 0 !important;
    }

    td:nth-child(1) {
      padding: 0 10px 0 20px !important;
    }

    td:nth-child(2),
    td:nth-child(4) {
      font-size: 13px !important;
      font-weight: normal !important;

      .strong {
        font-weight: normal !important;
      }
    }
  }
}

.loader {
  text-align: center;
  padding: 10px;
}

::ng-deep {
  tr:hover td:not(.selected) {
    background: $selected-card-hover;
  }
}

::ng-deep {
  .compact td:nth-child(1) span {
    width: 100%;
  }

  .compact td:nth-child(2) span {
    width: 100px;
  }

  .compact td:nth-child(3) {
    span {
      width: unset !important;
    }
  }

  tr.compact td {
    &:nth-child(2) {
      width: 114px;
    }

    &:nth-child(3) {
      width: 115px;
    }

    &:nth-child(4) {
      width: 80px;
    }

    &:nth-child(6) {
      width: 50px;
    }
  }

  tr td {
    &:nth-child(2) {
      width: 18%;
      &.active-columns-3 {
        width: 22%;
      }
      &.active-columns-2 {
        width: 26%;
      }
      &.active-columns-1 {
        width: 32%;
      }
    }

    &:nth-child(3) {
      width: 13%;
    }

    &:nth-child(4) {
      width: 14%;
    }

    &:nth-child(5) {
      width: 11%;
    }

    &:nth-child(6) {
      width: 7%;
    }
  }

  tr td.hidden-column {
    display: none;
  }
}

.iam-session-selected {
  position: relative;
  left: -65px !important;
}

.session-name-td {
  height: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;

  span {
    max-height: 44px;
    margin-left: 5px;
  }

  i.moon-Pin,
  i.moon-Pin-filled {
    padding-left: 5px !important;
  }
}

.ssm-ul {
  padding: 20px;

  .ssm-card {
    height: 40px;

    button {
      padding: 5px 10px !important;
      float: right;
    }
  }
}

img.moon-stop-outline {
  width: 23px;
  margin-left: -2px;
  margin-bottom: 2px;
}

td.selected .moon-Copy {
  color: $white-text-color !important;
}

i.moon-Copy {
  color: transparent;
}

::ng-deep {
  .compact .span-limiter {
    max-width: 100% !important;
  }
}

.span-limiter {
  max-width: 100%;
}
